<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="/static/vue@next.js"></script>

  <!-- import CSS -->
  <link rel="stylesheet" href="/static/element-plus.css">
  <!-- import JavaScript -->
  <script src="/static/element-plus.js"></script>
</head>

<body>
  <div id="app">
    <h1>Captcha Demo</h1>
    <button @click="check">check</button>
    <el-card v-if="show" style="position: relative;" :style="{width: `${card_width}px`}">
      <img style="width: 100%" :src="img">
      <div style="position: absolute;box-sizing: border-box;" :style="{
        top: `${(card_width - 40) / 4 * position.y + 20}px`,
        left: `calc(${position.x/100*(card_width-40)/4*3}px + 20px)`,
        width: `${(card_width - 40) / 4}px`,
        height: `${(card_width - 40) / 4}px`
      }">
        <img style="width: 100%; mask-size: 100%;mask-repeat: no-repeat;" :src="block" :style="{
          MaskPositionX: `${15/1000*card_width}px`,
          MaskPositionY: `${15/1000*card_width}px`,
          MaskSize: `calc(100% - ${15 / 500*card_width}px)`,
          maskImage: `url(${match})`
        }">
        <img style="position: absolute;top: 0;left: 0;width: 100%;" :src="match_border" :style="{
          top: `${15/1000*card_width}px`,
          left: `${15/1000*card_width}px`,
          width: `calc(100% - ${15 / 500*card_width}px)`
        }">
      </div>
      <el-slider v-model="position.x" :show-tooltip="false" @change="sendPosition"></el-slider>
    </el-card>
  </div>
</body>
<script>
  const { ref, reactive, onMounted } = Vue;
  const { ElMessage } = ElementPlus;
  const App = {
    setup() {
      const show = ref(false);
      const card_width = ref(400);
      const img = ref("");
      const block = ref("");
      const match = ref("");
      const match_border = ref("");
      const position = reactive({
        x: 0,
        y: 0
      });
      let ws = null;
      function check() {
        show.value = true;
        ws = new WebSocket("ws://localhost:4000/test");
        ws.onmessage = res => {
          console.log(res.data)
          if (img.value == "") {
            img.value = URL.createObjectURL(res.data);
            console.log(img.value)
          } else if (block.value == "") {
            block.value = URL.createObjectURL(res.data);
          } else if (match.value == "") {
            match.value = URL.createObjectURL(res.data);
          } else if (match_border.value == "") {
            match_border.value = URL.createObjectURL(res.data);
            ws.send(JSON.stringify({ Step: 1 }));
          } else {
            let data = JSON.parse(res.data);
            if (data.Step == 0) {
              position.y = data.index
            } else if (data.Step == 1) {
              if (data.isSuccessful)
                ElMessage({
                  message: '验证成功。',
                  type: 'success',
                })
              else
                ElMessage({
                  message: '验证失败。',
                  type: 'error',
                })
            }
          }
        }
        ws.onopen = _ => {
          img.value = "";
          block.value = "";
          match.value = "";
          match_border.value = "";
          position.x = 0;
          ws.send(JSON.stringify({ Step: 0 }));
        }
        ws.onclose = _ => {
          show.value = false;
        }
      }
      return {
        show,
        card_width,
        img,
        block,
        match,
        match_border,
        position,
        check,
        sendPosition: () => {
          ws.send(JSON.stringify({ Step: 2, position: position.x / 100 * (card_width.value - 40) / 360 * 3 }))
        }
      }
    }
  }
  const app = Vue.createApp(App);
  app.use(ElementPlus);
  app.mount("#app");
</script>

</html>